<template>
	<view class="member">
		<!-- 顶部导航 -->
		<diyNavBar value='消息中心'></diyNavBar>
		<!-- 返回的消息 -->
		<view class="memberItem" v-for="(item,index) in messageList" :key="index"
		 @click="$util.redirectTo(item.link)">
			<view class="memberItem-image">
				<view class="iconbox">
					<text class="iconfont icon-wendang"></text>
				</view>
				<view class="num" v-if="item.count">{{item.count}}</view>
			</view>
			<view class="memberItem-left">
				<view class="top">
					<text class="title" v-if="item.type == 1" @click="goto(1)">任务公告</text>
					<text class="title" v-else-if="item.type == 2" @click="goto(2)">系统公告</text>
					<text class="title" v-else @click="goto(3)">系统消息</text>
					<text class="time" v-if="item.time">{{item.time}}</text>
				</view>
				<view class="bottom" v-html="item.context"></view>
			</view>
		</view>
		<!-- 加载 -->
		<loading-cover ref="loadingCover"></loading-cover>	
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default{
		components:{
			diyNavBar,
			loadingCover
		},
		data(){
			return {
				messageList:[
				]
			}
		},
		onShow() {
			this.$http.sendrequest('/news/News',{},{
				tokenJudge:true
			}).then(res=>{
				if(res.code == 1){
					this.messageList = res.data;
					this.$refs.loadingCover.hide();
				}
			})
		},
		methods:{
			goto(type){
				let link = ''
				switch(type){
					case 3:
						link = 'messagesystem/messagesystem';
						break;
					default:
					    link = 'messagelist/messagelist'
				}
				this.$util.redirectTo('/pages/'+link,{type:type})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member{
		min-height:100vh;
		background: $uni-content-background-color;
		font-family: PingFangSC-semiBold;
		.memberItem{
			height: 160rpx;
			background: #FFFFFF;
			padding: 36rpx 48rpx 34rpx 42rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.memberItem-image{
				width: 90rpx;
				height: 90rpx;
				position: relative;
				margin-right: 38rpx;
				.iconbox{
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background: $uni-tabbar-hovercolor;
					text-align: center;
					line-height: 90rpx;
					.iconfont{
						font-size: 44rpx;
						color: #FFFFFF;
					}
				}
				.num{
					width: 58rpx;
					height: 58rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 58rpx;
					transform: scale(.6);
					position: absolute;
					top: -18rpx;
					right: -18rpx;
					border-radius: 50%;
					background: red;
					color: #FFFFFF;
				}
			}
			.memberItem-left{
				display: flex;
				flex-direction: column;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title{
						font-size: 32rpx;
						font-weight: bold;
					}
					.time{
						color: #999999;
						font-size: 24rpx;
					}
				}
				.bottom{
					width: 532rpx;
					font-size: 26rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					color: #999999;
					margin-top: 14rpx;
				}
			}
		}
	}
</style>
